<template>
  <div class="box">
    <SonA></SonA>
    <!-- <SonA></SonA>
    <SonB></SonB> -->
    <button @click="$router.push('/salarys?id=' + Math.random())">更新</button>
    <el-tree :data="list" :props="{ label: 'name', children: 'child' }">
      <template v-slot="{ data }">
        <!-- node:element组件封装后的节点信息，data:当前点击项的数据 -->
        <div>
          {{ data.name }}

          <button>操作</button>
        </div>
      </template>
    </el-tree>
  </div>
</template>
<script>
import SonA from './components/sonA.vue'
// import SonB from './components/sonB.vue'
export default {
  components: {
    SonA
    // SonB
  },
  data () {
    return {
      list: [
        {
          name: '深圳市',
          child: [
            {
              name: '宝安区',
              child: [{ name: '创维' }]
            },
            {
              name: '南山区'
            }
          ]
        }
      ]
    }
  },
  beforeCreate () {
    console.log('beforeCreate:父组件')
  },
  created () {
    console.log('created:父组件')
  },
  beforeMount () {
    console.log('beforeMount:父组件')
  },
  mounted () {
    console.log('mounted:父组件')
  },
  // beforeCreate前，不能使用this
  beforeRouteEnter (to, from, next) {
    // console.log('beforeRouteEnter')
    next(vm => {
      // vm:代表this
      console.log(vm.list)
    })
  },
  // 路由更新了，路由所对应组件不变
  beforeRouteLeave (to, from, next) {
    // console.log('beforeRouteLeave', this.$route.path)
    next()
  },
  // 什么情况路由更新了，但路由所对方不组件不变
  beforeRouteUpdate (to, from, next) {
    // console.log('beforeRouteUpdate', this.$route.query.id)
    this.$nextTick(() => {
      // console.log(this.$route.query.id)
    })
    next()
  },
  // a页面跳b页面时：b(beforeCreate)==>created:b===>beforeMount:b===>beforeDestroy:a===>destroyed:a
  // beforeDestroy () {
  //   console.log('beforeDestroy', this.$route.path)
  // },
  methods: {
    btnClick (node, data) {
      console.log(node, data)
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  display: flex;
}
</style>
